<template>
  <!-- 标记销售单价 -->
  <div class="designer-box">
    <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />

    <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
      @handleSelectionChange="handleSelectionChange" @handleChange="handleChange" @updatePage="updatePage"
      @updateLimit="updateLimit" :tableHeaderData="inventoryTableHeaderData" :tableData="inventoryTableData"
      @tableDetail="tableDetail" :devise="true" @through="through" @overrule="overrule" @updatePhotos="updatePhotos" />


    <div class="dialogUpdatePhotos">
      <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500" align-center>
        <template #header>
          <i class="iconfont icon-shangchuan"></i>
          <div class="title-box">
            <h5 class="updateTitle">上传文件</h5>
            <p class="updateTitletxt">只能上传PNG格式图片</p>
          </div>
          <div class="updata-box">
            <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <div class="avatar-uploader-content">
                <i class="iconfont icon-shangchuantupian"></i>
                <h5>将图片拖到此处上传。</h5>
                <p>或者，您可以单击此处选择一个文件</p>
                <h5 style="color: #2E44FF;">点击上传</h5>
              </div>
            </el-upload>
          </div>
        </template>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              上传提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { queryOutsourcingApi, deleteOutsourceApi } from '@/api/outsourcing'
import { ref, onMounted } from 'vue';

const idActive = 'orderId'
let popTitle = ref('新增外协商')
// 详情控制变量
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref({})
let disabled = ref(false)
let flag = ref(false)
// 上传
let dialogFormVisible = ref(false)
// 表单绑定属性名
let inventoryForm = ref({
  orderId: '', // 单据编号
  customerName: '', // 客户名称
  designerName: '', // 设计师

})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'orderId',
    label: '单据编号',
    minWidth: '120px'
  },
  {
    name: 'customerName',
    label: '客户名称',
    minWidth: '120px'
  },
  {
    name: 'designerName',
    label: '设计师',
    minWidth: '120px'
  },
])
// 查找
const onSearch = (v) => {
  pageNum.value = 1
  getdesignerOrderData(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor'
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor'
  },
  {
    prop: 'businessType',
    label: '业务类型'
  },
  {
    prop: 'productionContent',
    label: '制作内容'
  },
  {
    prop: 'creator',
    label: '制单人'
  },
  {
    prop: 'productId',
    label: '存货名称'
  },
  {
    prop: 'projectName',
    label: '项目名称',
  },
  {
    prop: 'totalQuantity',
    label: '数量',
  },
  {
    prop: 'salePrice',
    label: '销售单价',
  },
  {
    prop: 'price',
    label: '成本单价',
  },
  // {
  //   prop: 'unitPrice',
  //   label: '单价',
  // },
  {
    prop: 'designerName',
    label: '设计师',
  },
  {
    prop: 'designDraft',
    label: '设计稿',
  },
  {
    prop: 'auditStatus',
    label: '审核状态',
  },
])
// 表格数据内容
let inventoryTableData = ref([
 
])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  getoutboundOrderData(inventoryForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}

// 详情双击行
const tableDetail = (props) => {
  disabled.value = true
  flag.value = true
  popTitle.value = '外协商详情信息'
  defindFlag.value = false
  PopData.value = props
}


// 上传文件
const updatePhotos = () => {
  dialogFormVisible.value = true
}


const imageUrl = ref('')

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/png') {
    ElMessage.error('请上传规定的图片格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('上传的图片不得大于 5MB!')
    return false
  }
  return true
}


// 请求外协商接口函数
const getdesignerOrderData = async (data = '') => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)

  // let res = await queryOutsourcingApi(params)
  // let { code, total, rows } = res
  // if (code == 200) {
  //     inventoryTableData.value = rows
  //     totals.value = total
  // }
}
// 通过
const through = () => {

}
// 驳回
const overrule = () => {

}
onMounted(() => {
  getdesignerOrderData()
})
</script>
<style scoped lang='scss'>
.designer-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }

  .dialogUpdatePhotos {
    .icon-shangchuan {
      background-color: #E8E4FD;
      font-size: 23px;
      padding: 10px;
      border-radius: 50%;
      color: #2E44FF;
    }
    .title-box{
      margin: 40px 0 30px 0;
      .updateTitle {
        font-size: 16px;
        font-weight: 550;
      }
      .updateTitletxt{
        color: #666;
      }
    }

    :deep(.el-dialog) {
      display: flex;
      flex-direction: column;
      margin: 0 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-height: calc(100% - 30px);
      max-width: calc(100% - 30px);
    }

    :deep(.el-dialog .el-dialog__body) {
      flex: 1;
      overflow: auto;
    }

    :deep(.el-dialog__body) {
      padding: 0;
    }

    .is-dark {
      text-align: center;
    }

    :deep(.avatar-uploader) {
      .avatar {
        width: 178px;
        height: 178px;
        display: block;

      }

      .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
      }

        .avatar-uploader-content {
          width: 100%;
          height: 178px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          h5 {
            font-weight: 550;
            font-size: 16px;
          }
  
          p {
            color: #333;
          }
        }
   
         
          .icon-shangchuantupian{
            font-size: 35px;
            color: #2E44FF;
          }
      
      .el-upload:hover {
        border-color: var(--el-color-primary);
      }

    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }


}</style>
